<template>
  <el-carousel :interval="5000" arrow="always" class="carousel">
    <el-carousel-item v-for="(item, idx) in imgs" :key="idx">
      <a href="/buy/mi9"><img width="1226" height="460" :src="item" alt=""></a>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
import dataCarousel from 'assets/data/data-index-home-carousel'
export default {
  data() {
    return {
      imgs: dataCarousel.slider
    }
  },
  mounted() {
	window.alert('小米项目只抓取了mi9手机数据，只有轮播图区域点击能正常跳转，查看，加购物车操作，其余产品点击默认会跳转到首页')
  }
}
</script>

<style lang="stylus">
.carousel
  width 100%
  height 100%
  background-color #eee
  .el-carousel__container
    height 460px
    height 100%
    .el-carousel__item
      left: 2px
    .el-carousel__arrow
      font-size 45px
      background-color rgba(31,45,61,0)
      height: 69px
      width: 41px
      border-radius: 1px
      &:hover
        background-color rgba(31,45,61,.3)
        height: 69px
        width: 41px
        border-radius: 1px
      &.el-carousel__arrow--left
        left 235px
      &.el-carousel__arrow--right
        right: 0
  .el-carousel__indicators
    bottom 23px
    left 1128px
    .el-carousel__indicator
      padding: 2px 2px
      background-color rgba(255, 255, 255, 0.3)
      border-radius: 50%
      margin-right 10px
      &.is-active .el-carousel__button
        background-color rgba(255,255,255,0.7)
      .el-carousel__button
        width: 6px
        height: 6px
        border-radius: 3px
        background-color rgba(0, 0, 0, 0.4)
</style>
